<template>
  <div class="login_index">
    <!-- <Header></Header> -->
    <div class="content inner">
      <div class="login-box">
        <div class="login-bd">
          <div class="bd">
            <div class="prompt">
              <div class="prompt-hd">
                <h3 class="title">温馨提示</h3>
              </div>
              <div class="prompt-bd" v-html="projectInfos.loginNote"></div>
            </div>
            <div class="login">
              <div class="login_title">
                <h3>
                  {{ isDelayApply == "true" ? "延缓入学登录" : "用户登录" }}
                </h3>
                <!-- <h3 v-if="isDelayApply === 'true'">延缓入学登录</h3>
                <h3 v-else>用户登录</h3> -->
              </div>
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="idNo">
                  <el-input
                    v-model="ruleForm.idNo"
                    :placeholder="
                      isDelayApply == 'true'
                        ? '请输入身份证号'
                        : '请输入身份证号 / 证件号'
                    "
                  >
                    <i slot="prefix" class="el-input__icon">
                      <img
                        :src="require('../assets/images/icon_yh.png')"
                        alt=""
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                  <el-input
                    v-model="ruleForm.pwd"
                    placeholder="请输入密码"
                    show-password
                  >
                    <i slot="prefix" class="el-input__icon icon_code">
                      <img
                        :src="require('../assets/images/icon_mm.png')"
                        alt=""
                      />
                    </i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-col :span="14">
                    <el-input
                      v-model="ruleForm.code"
                      placeholder="请输入验证码"
                      @keyup.native.enter="submitForm('ruleForm')"
                      style="margin-right: 10px"
                    >
                      <i slot="prefix" class="el-input__icon icon_code">
                        <img
                          :src="require('../assets/images/icon_yzm.png')"
                          alt=""
                        />
                      </i>
                    </el-input>
                  </el-col>
                  <el-col :span="10" style="height: 42px">
                    <div class="img-verify">
                      <img :src="verifyUrl" alt="" @click="refreshCode" />
                    </div>
                  </el-col>
                </el-form-item>
                <el-form-item style="margin: -10px 0 30px">
                  <router-link
                    class="el-link el-link--primary forgotPwd"
                    :to="{ path: '/forgot' }"
                    >忘记密码？</router-link
                  >
                </el-form-item>
                <el-form-item style="margin-bottom: 20px">
                  <el-button
                    type="primary"
                    @click.enter="submitForm('ruleForm', $event)"
                    style="width: 100%"
                    >登录</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="register"
                    @click="resetForm"
                    style="width: 100%"
                    >注册</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import fetches from "../utils/request";
const { defaultHost } = fetches;
import localDb from "../utils/localDb.js";
import { getSysPara, loginStudent, delayLogin, getSysZt } from "../utils/api";
export default {
  name: "Zmkm",
  data() {
    return {
      ruleForm: {
        idNo: "",
        pwd: "",
        code: "",
      },
      rules: {
        idNo: [
          {
            required: true,
            message: "请输入身份证号 / 证件号",
            trigger: "blur",
          },
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      isCodeCorrect: true, //验证码是否正确
      identifyCodes: "", //验证码随机数
      verifyUrl: "", //验证码图片
    };
  },
  methods: {
    refreshCode() {
      const identifyCode = parseInt(Math.random() * 1000, 10);
      this.identifyCodes = identifyCode;
      this.verifyUrl = `${defaultHost}/api/Student/ValidateCode?key=${this.identifyCodes}`;
      // console.log(this.identifyCodes);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const params = {
            idNo: Base64.encode(this.ruleForm.idNo),
            pwd: Base64.encode(this.ruleForm.pwd),
            code: this.ruleForm.code,
          };
          if (this.isDelayApply) {
            try {
              const data = await delayLogin(params, this.identifyCodes);
              if (data.res == 0) {
                this.$store.dispatch("setUser", data.data.personDelay.name);
                this.$store.dispatch("setToken", data.data.token);
                this.$store.dispatch("setStuList", data.data.personDelay);
                // let stuList = data.data.personDelay;
                // console.log(stuList);
                this.$router.push({ path: "/delayapply" });
              } else {
                this.refreshCode();
                this.$message.error(data.msg);
              }
            } catch (error) {}
          } else {
            try {
              const data = await loginStudent(params, this.identifyCodes);
              if (data.res == 0) {
                this.$store.dispatch("setUser", data.data.person.name);
                this.$store.dispatch("setToken", data.data.token);
                this.$store.dispatch("setStuList", data.data.person);
                let stuList = data.data.person;
                // console.log(stuList);
                if (stuList.step == 1 || stuList.step == 0) {
                  this.$router.push({ path: "/basicinfo" });
                } else if (stuList.step == 2) {
                  this.$router.push({ path: "/signup" });
                } else if (stuList.step == 3) {
                  this.$router.push({ path: "/results" });
                  // this.$router.push({ path: "/selectGrade" });
                }
              } else {
                this.refreshCode();
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
        } else {
          this.refreshCode();
          return false;
        }
      });
    },
    resetForm() {
      this.$router.push({ path: "/register" });
    },
    //获取项目标题
    async getSysName(type) {
      try {
        const data = await getSysPara(type);
        if (data.res == 0) {
          this.$store.dispatch("setWpzswTitle", data.data[0].value);
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    async getSysZt() {
      try {
        const data = await getSysZt();
        if (data.res == 0) {
          localDb.set("emptyEnter", data.data);
          if (data.data.isMt != "0") {
            this.$router.push({ path: "/empty" });
          }
        }
      } catch (error) {}
    },
  },
  computed: {
    projectInfos() {
      return this.$store.state.frontPage.projectInfos;
    },
    wpzswTitle() {
      return this.$store.state.wpzswTitle;
    },
    isDelayApply() {
      return this.$store.state.isDelayApply;
      // return localDb.get("delayApply");
    },
  },
  created() {
    this.getSysZt();
    this.$store.commit("SETUSER", "");
    this.$store.commit("SETTOKEN", "");
    this.$store.commit("SETSTULIST", "");
  },
  mounted() {
    this.refreshCode();
    this.getSysName("SysName");
    this.$store.dispatch("fetchGetProject", {
      sucCallback: () => {},
      falCallback: () => {},
    });
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.login_index {
  min-height: 100vh;
  background: url(~@/assets/images/bg_login.png) no-repeat top center/cover;
  background-color: #fff;
  // margin-top: -5px;
}
.content {
  padding-bottom: 0;
}
.inner {
  padding-top: 115px;
}
.login-box {
  position: relative;
  margin: auto;
  width: 1080px;
  height: 600px;
  padding: 60px;
  background: #fff;
  border-radius: 10px;
  .login-bd {
    // height: 464px;
    // padding: 20px 40px 0;
    background: #fff;
    border-radius: 40px;
  }
  .bd {
    display: flex;
    justify-content: space-between;
    .login {
      // float: right;
      // width: 350px;
      margin: auto;
      height: 480px;
      padding-left: 90px;
      border-left: 1px #ededed solid;
      .login_title {
        margin-bottom: 44px;
        h3 {
          font-size: 30px;
          color: #0195ff;
        }
      }
      .el-form-item {
        margin-bottom: 27px;
        .el-input {
          padding-left: 5px;
          /deep/.el-input__inner {
            background-color: unset;
            border-radius: unset;
            border: none;
            border-bottom: 1px solid #e6e6e6;
            padding-left: 38px;
            font-size: 16px;
            color: #222;
            &::placeholder {
              color: #ccc;
            }
            &:focus {
              border-bottom: 1px solid #0195ff;
            }
          }
          /deep/ .el-input__prefix {
            left: 10px;
          }
        }
        /deep/ .el-form-item__error {
          padding-left: 44px;
        }
        .forgotPwd {
          color: #0195ff;
          margin-top: -20px;
          text-decoration: none;
        }
        .el-button {
          height: 42px;
          background-color: #0195ff;
          border: none;
          font-size: 16px;
        }
        .register {
          border: 1px solid #0195ff;
          background-color: #fff;
          color: #0195ff;
          &:hover {
            background-color: #0195ff;
            color: #fff;
          }
        }
      }
      .el-input__icon {
        display: inline-block;
        width: 22px;
        height: 22px;
        img {
          width: 100%;
          height: 100%;
          margin-top: -4px;
          vertical-align: middle;
        }
      }
      .icon_code {
        width: 18px;
      }
      .img-verify {
        float: right;
        width: 138px;
        height: 38px;
        border: 1px #d2d5d7 solid;
        border-radius: 5px;
        cursor: pointer;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .prompt {
      width: 446px;
      height: 468px;
      .prompt-hd {
        margin-bottom: 12px;
        .title {
          font-size: 30px;
          color: #333;
          font-weight: bold;
        }
      }
      .prompt-bd {
        position: relative;
        z-index: 2;
        font-size: 16px;
        width: 415px;
        height: 409px;
        line-height: 28px;
        text-align: justify;
        overflow: auto;
        color: #333;
      }
    }
  }
}
</style>
